<!--波动率曲面-->
<template>
    <div  :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
import  'echarts-gl'
const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '950px'
    },
    height: {
      type: String,
      default: '700px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      default:[],
      required: true
    },
    surfaceChg:{
      type: Function,
      default:function(){}
    }
  },

  data() {
    return {
      chartData:{},
      chart: null,
      proxy:{},
      title:'波动率曲面',
      listData:[],
      seriesData:[]
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const chgFunc=this.surfaceChg;
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.on('click', function(params) {
        // 控制台打印数据的名称
        chgFunc(params.data);
      });
      this.setOptions(this.chartData)
    },
    clearChart(){
      this.title='波动率曲面';
      this.setOptions({'titleText':this.title,'seriesData':[]});

    },
    /**
     * 曲线调用数据处理方法
     * @param proxy  vue上下文实例
     * @param title  曲线名称
     * @param listData 曲线数据
     * @param xName   横坐标字段名
     * @param yName   纵坐标字段名
     * @param flag    下拉项是否覆盖默认值
     */
    setCharData(proxy,title,listData,xName,yName,zName){
      this.proxy=proxy;
      if(listData==null||listData.length<1){
        this.initChart([]);
        return;
      }
      const calcData=listData.resultList;
      let seriesData=[];
      for (let i = 0; i < calcData.length; i++) {
        let item = calcData[i];
        let yValue=item[yName];
        let xValue;
        xValue =  proxy.lsh.round(item[xName]*100,2);
        let zValue =  proxy.lsh.round( item[zName]*100,2)+'';
        let axis = [ xValue,yValue, zValue];
        seriesData.push(axis);
      }
      function compare(a, b) {
        return a-b;
      }
      let keys=[];
      seriesData.forEach(value => {
        keys.push(value[0]);
      });
      function removeDuplicatedItem3(ar) {
        let ret = [];
        ar.forEach(function(e, i, ar) {
          if (ar.indexOf(e) === i) {
            ret.push(e);
          }
        });
        return ret;
      }
      let onlyElm=removeDuplicatedItem3(keys).sort(compare);
      let map=new Map();
      for (let i=0;i<onlyElm.length;i++){
        let v=[];
        for (let j=0;j<seriesData.length;j++){
          if (onlyElm[i]==seriesData[j][0]){
            v.push([seriesData[j][1],seriesData[j][2]])
          }
        }
        map.set(onlyElm[i],v);
      }
      let maxArrV=[]
      for(let i=0;i<onlyElm.length;i++){
        maxArrV.push(map.get(onlyElm[i]).length);
      }
      let loop=Math.max.apply(null,maxArrV);
      let v=[];
      for(let i=0;i<loop;i++){
        //期限方向相反
        for (let j=0;j<onlyElm.length;j++){
          let yzData=map.get(onlyElm[j]);//得到三维数组x对应的数组集合，每次添加一条数据
          let flag=false;
          if(j<onlyElm.length&&!flag){//集合长度小与j的不再进行添加
            for (let k=i;k<yzData.length;k++){
              v.push([onlyElm[j],yzData[k][0],yzData[k][1]]);
              flag=true;
              break;
            }
          }
        }
      }
      seriesData=v;
      this.title = title;
      this.chartData={'titleText':this.title,'seriesData':seriesData};
      this.chart.dispose();
      this.initChart();
    },
    setOptions(expectedData) {
      unwarp(this.chart).setOption({
        title: [
          {
            text: expectedData.titleText,
            left: 'center',
            textStyle: {
              fontSize: 20,
              lineHeight: 100,
              height: 100
            },
          }
        ],
        tooltip: {
          formatter: function(params, ticket, callback) {
            return expectedData.titleText + "<br />" +
                "期限:"+params.data[1] + "<br />" +
                "行权价(%):"+ params.data[0] + "<br />" +
                "波动率(%):"+ params.data[2];
          }
          },
        visualMap: {
          show: false,
          dimension: 2,
          min: 10,
          type:'continuous',
          max: 30,
          inRange: {
            color: [
              "#313695",
              "#3e42a2",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#b71007",
              "#a50026"]
          }
        },
        xAxis3D: {
          min:'dataMin',
          max:'dataMax',
          nameTextStyle:{
            lineHeight:30
          },
          type: 'value',
          step: 0.5,
          name: '行权价(%)'
        },
        yAxis3D: {
          type: 'category',
          step: 0.5,
          nameTextStyle:{
            lineHeight:30
          },
          name: '期限'
        }, toolbox: {
          feature: {
            // saveAsImage: {},
          }
        },
        zAxis3D: {
          type: 'value',
          min:function (value) {
            return Math.floor(value.min);
          },
          max:function (value) {
            return Math.ceil(value.max);
          },
          minInterval: 1,
          step: 1,
          nameTextStyle:{
            lineHeight:30,
            nameRotate:90
          },
          name:'波动率(%)',
          nameRotate: 90
        },
        grid3D: {
          viewControl: {
            // projection: 'orthographic'
          },
          boxHeight: 80
        },
        series: [{
          type: 'surface',
          wireframe: {
            show: false
          },
          data:expectedData.seriesData,
        }]

      });
    }
  }
}
</script>
